<% layout('layout/layout') %>
<% block('header').append(`<style>



 .sidebar .side-menu {
    background-color: #fff;
    border-radius: 2px;
    border: 1px #e5e5e5 solid;
 }
 .sidebar .side-menu .head {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: #fff;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    padding: 12px 17px;
    text-transform: uppercase;
    background-color: #59b210;
    border: 1px solid #59b210;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-bottom: 1px #59b210 solid;
}
 .sidebar .side-menu nav .nav > li {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #eaeaea;
 }
 .sidebar .side-menu nav .nav > li > a {
    padding: 13px 15px;
    color: #666666;
    letter-spacing: 0.2px;
    font-size:14px;
}
.sidebar .side-menu nav .nav > li > a:after {
    color: #bababa;
    content: "\\e6a7";
    float: right;
    font-size: 12px;
    height: 20px;
    line-height: 18px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 10px;
    font-family: "iconfont";
}
.side-menu nav .nav > li.menu-item .active {
  color:#59b210;
}
</style>`) %>
<div class=" container">
  <ol class="breadcrumb">
    <li><a href="/">首页</a></li>
    <li class="active"><%= title %></li>
  </ol>
  <div class="row">
    <div  class="col-xs-3 col-md-3 sidebar ">
      <div class="side-menu animate-dropdown outer-bottom-xs">
        <div class="head"><i class="icon fa fa-align-justify fa-fw"></i> 产品列表</div>
        <nav class="yamm megamenu-horizontal" role="navigation">
          <ul class="nav">
            <li class="menu-item ">
              <a class="<%=!query.catalog? 'active':''%>"  href="./index" >全部产品</a>
            </li>
            <% goodTypes.forEach(function(item) { %>
            <li class="menu-item">
              <a class="<%=query.catalog === item.name? 'active':''%>" href="?catalog=<%=item.name %>" ><%=item.nameCn %></a>
            </li>
            <% }) %>
          </ul><!-- /.nav -->
        </nav><!-- /.megamenu-horizontal -->
      </div>
    </div>
    <div class="col-xs-9 col-md-9">
      <div class="row">
        <% if(frontInfo.notice && frontInfo.notice.isValid ===1) { %>
        <div  class="alert alert-warning alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <%= frontInfo.notice && frontInfo.notice.value %>
        </div>
        <% } %>
        <div class="text-right padding-right">
          <form id="searchForm" class="form-inline">
            <!--<div class="form-group">-->
              <!--<label class="sr-only">Email</label>-->
              <!--<p class="form-control-static">email@example.com</p>-->
            <!--</div>-->
            <div class="input-group">
              <input type="text" name="search" style="height: 36px;" class="form-control" value="<%=query.search || '' %>" placeholder="搜索...">
              <input name="page" type="hidden" value="1">
              <span class="input-group-btn">
                <button class="btn btn-default" ><i class="iconfont icon-search"></i></button>
              </span>
            </div>
          </form>
        </div>

        <% if(goods && goods.length === 0) { %>
        <div class="col-xs-12 text-muted text-center" style="padding-top:15%;">
          <i class="iconfont icon-box text-muted" style="font-size: 45px;"></i>
          <p>还没有相关的商品哦～</p>
        </div>
        <% } %>
        <% goods.forEach(function(item){  %>
        <div  class="col-xs-4  col-md-4 ">
            <a  href="/goods/detail/<%=item._id %>" class="thumbnail">
              <div style="">
                <div class="img_bg lazy"  data-original="<%=item.imgTmb %>"  style="width:100%;height:222px;background-size:cover;"></div>
                <!--<img data-src="holder.js/100%x200" src="<%=item.imgTmb %>" alt="100%x200" style="width: 100%; display: block;" >-->
              </div>
              <div class="caption">
                <h5 class="dot text-center fs16"><%=item.name%></h5>
                <p class="no-margin clearfix">
                  <span class="price pull-left fs20 text-primary">￥<%=item.sellPriceStr %></span>
                  <% if (item.stock && item.stock > 0) { %>
                  <button  data-id="<%=item._id %>" class="add_cart btn btn-primary pull-right" type="button">加入购物车</button>
                  <% } else { %>
                  <button  class="add_cart btn btn-warning pull-right" type="button" disabled>已售罄</button>
                  <% } %>
                </p>
              </div>
            </a>
        </div>
        <% }) %>
      </div>
      <% if(goods && goods.length !== 0) { %>
      <div class="row">
        <div class="j_pager" data-page="<%=page %>"  data-param="<%=queryStr %>"   data-count="<%=count %>"></div>
      </div>
      <% } %>
    </div>
  </div>
</div>
<% block('footer').append(`<script src='/js/jquery.lazyload.min.js'></script>`)%>
<% block('footer').append(`<script src="/js/jPager.js" ></script>`); %>
<% block('footer').append(`<script>
jQuery(function () {
	$('.j_pager').pager()
    $('#searchForm').on('submit', function (e) {
        // e.preventDefault()
        // location.href += '?' + $('#searchForm').serialize()
        // return false;
    })
    $("div.lazy,li.lazy").lazyload({effect: "fadeIn"});
	$('.add_cart').on('click',function(e){
		e.preventDefault()
		e.stopPropagation()
		var $this = $(this)
		$.post('/add2Cart',{_id:$this.data('id'),num:1}).done(function(res){
      console.log(res)
      if (res.code === 0) {
      	var num = res.data.cart.reduce(function(before,item){
      		return before + item.goodsNum
      	}, 0)
      	$('#cartBadge').triggerHandler('change.cartBadge',[num])
      	$.Toast('添加成功','success')
      } else {
      	$.Toast(res.message,'warning')
      }
		})
	})
})
</script>`) %>